<template>
  <div class="track-container">
    <transition v-on:after-enter="afterEnter"
                v-on:before-enter="beforeEnter"
                v-on:enter="enter"
                name="drop"
                v-for="(litterBall,indexBall) in balls" :key="indexBall">
      <div class="track" v-show="litterBall.show">
        <div class="inner-track" :class="indexBall">1</div>
      </div>
    </transition>
  </div>
</template>

<script type="es6">
export default {
  inject: ['reload'], /**reload(callback);对应provide中的数组值*/
  name: "TrackAnim",
  data() {
    return {
      balls: [
        {show: false},
        {show: false},
        {show: false},
        {show: false},
        {show: false},
        {show: false},
        {show: false},
        {show: false},
        {show: false},
        {show: false}
      ],
      dropBalls: [] // 用dropBalls来存放掉落的小球
    }
  },
  mounted() {

  },
  methods: {
    drop(el) {
      for (let i = 0; i < this.balls.length; i++) {
        if (!this.balls[i].show) {//把小球show为false的变成true，展示出来
          let ball = this.balls[i];
          ball.show = true;  //这里这样写他继承的this.balls的值也会变成true
          ball.el = el; //把这个球的位置保留下来
          this.dropBalls.push(ball);  //把这个已经drop的球放到dropBalls中
          //console.log(this.dropBalls,222)
          return; //结束循环和函数，不会让循环再往后执行了
        }
      }
    },

    beforeEnter(el) {

      let count = this.balls.length || 1;
      while (count--) {
        let ball = this.balls[count];
        if (ball.show) {
          let rect = ball.el.getBoundingClientRect(); // getBoundingClientRect()获取小球相对于视窗的位置，屏幕左上角坐标为0，0
          let x = -(window.innerWidth * 0.9 - rect.left - rect.x);// 因为是从左往右所以X轴为负数
          let y = -(window.innerHeight - rect.top - window.innerHeight / 2);// 因为是从左往右所以Y轴为负数
          // return
          el.style.display = '';
          el.style.webkitTransform = `translate3d(0, ${y}px,0)`; // 设置外层盒子，即小球垂直方向的位移
          el.style.transform = `translate3d(0, ${y}px,0)`;
          let inner = el.getElementsByClassName('inner-track')[0];
          inner.style.webkitTransform = `translate3d(${x}px,0,0)`; // 设置内层盒子，即小球水平方向的距离
          inner.style.transform = `translate3d(${x}px,0,0)`;
        }
      }
    },

    enter(el, done) {
      // return
      // 触发浏览器重绘
      let rf = el.offsetHeight;
      this.$nextTick(() => { // 让动画效果异步执行,提高性能
        el.style.webkitTransform = 'translate3d(0, 0, 0)'// 设置小球掉落后最终的位置
        el.style.transform = 'translate3d(0, 0, 0)'
        let inner = el.getElementsByClassName('inner-track')[0]
        inner.style.webkitTransform = 'translate3d(0, 0, 0)'
        inner.style.transform = 'translate3d(0, 0, 0)'
        el.addEventListener('transitionend', done) // Vue为了知道过渡的完成，必须设置相应的事件监听器。它可以是transitionend或 animationend
      })
    },

    afterEnter(el) {
      // return
      let ball = this.dropBalls.shift(); // 完成一次动画就删除一个dropBalls的小球
      if (ball) {
        ball.show = false;
        el.style.display = 'none';
      }
    },
  }
}
</script>

<style lang="scss" scoped>
.track {
  left: 90vw;
  bottom: 50vh;
  z-index: 10;
  position: fixed;
  transform: translate3d(0, 0, 0);
  transition: all .6s cubic-bezier(.4,-0.26,.52,-0.2);
  //display: block!important;
  .inner-track {
    width: 16px;
    height: 16px;
    display: flex;
    font-size: 12px;
    color: #FFFFFF;
    background: #1989fa;
    justify-content: center;
    align-items: center;
    font-weight: bolder;
    border-radius: 100%;
    transition: all .6s linear;
    transform: translate3d(0, 0, 0);
  }
}
</style>